import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, DatePicker } from 'antd';
import '../components.css';
import { Link, useLocation } from 'react-router-dom';
import CollectionsService from '../../services/CollectionsService';
import { CloseCircleOutlined, CaretUpOutlined } from '@ant-design/icons';

const { Option } = Select;

export default function UpdateCollection() {
  const [collectionData, setCollectionData] = useState({
    id: '',
    orderId: '',
    collectionDate: '',
    period: '',
    paymentMethod: '现金',
    approvalStatus: '待审批',
    amount: '',
    overdueStatus: '正常'
  });
  
  const location = useLocation();
  const path = location.pathname;
  const id = path.split('/')[2];

  useEffect(() => {
    CollectionsService.getCollectionById(id).then(response => {
      setCollectionData(response.data);
    }).catch(error => {
      console.log(error);
    });
  }, [id]);

  const updateCollection = (e) => {
    e.preventDefault();
    CollectionsService.updateCollection(id, collectionData).then(() => {
      // 实际项目中这里会有成功提示和跳转
    }).catch(error => {
      console.log(error);
    });
  };

  const handleChange = (name, value) => {
    setCollectionData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className='updatecollection'>
      <div className="title" style={{ paddingBottom: '30px' }}>更新回款信息</div>
      
      <Form
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        style={{ marginLeft: '2%' }}
      >
        <Form.Item label="系统编号">
          <Input value={collectionData.id} disabled />
        </Form.Item>
        
        <Form.Item label="关联订单">
          <Input 
            value={collectionData.orderId} 
            onChange={e => handleChange('orderId', e.target.value)} 
          />
        </Form.Item>
        
        <Form.Item label="回款日期">
          <DatePicker 
            value={collectionData.collectionDate} 
            onChange={date => handleChange('collectionDate', date.format('YYYY-MM-DD'))} 
            style={{ width: '100%' }} 
          />
        </Form.Item>
        
        <Form.Item label="回款期次">
          <Input 
            value={collectionData.period} 
            onChange={e => handleChange('period', e.target.value)} 
            placeholder="例：第1期"
          />
        </Form.Item>
        
        <Form.Item label="付款方式">
          <Select
            value={collectionData.paymentMethod}
            onChange={value => handleChange('paymentMethod', value)}
          >
            <Option value="现金">现金</Option>
            <Option value="银行转账">银行转账</Option>
            <Option value="支付宝">支付宝</Option>
            <Option value="微信支付">微信支付</Option>
          </Select>
        </Form.Item>
        
        <Form.Item label="审批状态">
          <Select
            value={collectionData.approvalStatus}
            onChange={value => handleChange('approvalStatus', value)}
          >
            <Option value="待审批">待审批</Option>
            <Option value="已通过">已通过</Option>
            <Option value="被否决">被否决</Option>
            <Option value="被驳回">被驳回</Option>
            <Option value="已撤销">已撤销</Option>
          </Select>
        </Form.Item>
        
        <Form.Item label="回款金额">
          <Input 
            prefix="¥" 
            value={collectionData.amount} 
            onChange={e => handleChange('amount', e.target.value)} 
          />
        </Form.Item>
        
        <Form.Item label="逾期状态">
          <Select
            value={collectionData.overdueStatus}
            onChange={value => handleChange('overdueStatus', value)}
          >
            <Option value="正常">正常</Option>
            <Option value="逾期">逾期</Option>
          </Select>
        </Form.Item>
        
        <Form.Item wrapperCol={{ offset: 5, span: 16 }} style={{ marginTop: '50px' }}>
          <Button 
            type="primary" 
            onClick={updateCollection}
            icon={<CaretUpOutlined />}
          >
            更新
          </Button>
          <Button 
            type="danger" 
            style={{ marginLeft: "25px" }} 
            icon={<CloseCircleOutlined />}
          >
            <Link to="/collectionlist" style={{ color: "white" }}>关闭</Link>
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}